<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#box {
				width: 100vw;
				height: 12vw;
				/* background-color: oldlace; */
			}

			.xian {

				border: 1px solid #ccc;
			}

			.span {
				font-size: 5vw;
				float: left;
				color: #09b674;
				margin: 0 auto;
				text-align: center;
				margin-left: 420px;
			}

			.p {
				font-size: 4vw;
				color: #101010;
				text-align: left;
				text-align: right;
			}

			#box2 {
				width: 95vw;
				height: 22vw;
				/* background-color: #09b674; */
			}

			.kuang {
				width: 3vw;
				height: 3vw;
				/* background-color: #09b674; */
				margin-top: 90px;
				float: left;
			}

			.pian {
				width: 21vw;
				height: 21vw;
				/* background-color: #aeadad;
 */
				float: left;
			}

			.jie {
				width: 62vw;
				height: 8vw;
				font-size: 3vw;
				float: left;
			}

			.qian {
				font-size: 34px;
				color: #fc6217;
				float: left;
				margin-top: 5px;

			}

			.hui {
				font-size: 24px;
				color: #999999;
				float: left;
				margin-left: 25px;
				margin-top: 12px;
			}

			.yi {
				width: 150px;
				height: 44px;
				border-radius: 2px;
				border: solid 1px #d9d9d9;
				float: right;

			}

			.ju {
				width: 100vw;
				height: 3vw;
				/* background-color: #f4f4f4; */
			}

			.ju2 {
				width: 100vw;
				height: 3vw;
				background-color: #f4f4f4;
			}

			#box3 {
				width: 100vw;
				height: 12vw;
				/* background-color: oldlace; */
			}

			.qi {
				width: 16vw;
				height: 4vw;
				font-family: PingFang-SC-Medium;
				font-size: 4vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 5vw;
				letter-spacing: 0vw;
				color: #09b674;
				margin-left: 418px;
			}

			.dai {
				width: 13vw;
				height: 1vw;
				font-family: PingFang-SC-Medium;
				font-size: 2vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 5vw;
				letter-spacing: 0vw;
				color: #09b674;
				margin-left: 428px;

			}

			#box4 {
				width: 100vw;
				height: 85vw;
				/* background-color: orange; */
			}

			.mai1 {
				width: 45vw;
				height: 45vw;
				/* background-color: #ffffff; */
				float: left;
				margin-top: 120px;

			}

			.mai1-tu {
				width: 36vw;
				height: 36vw;
				float: left;
			}

			.zi {
				width: 44vw;
				height: 8vw;
				font-family: PingFang-SC-Medium;
				font-size: 3vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 5vw;
				letter-spacing: 0vw;
				color: #101010;
				float: left;
			}





			.mai2 {
				width: 45vw;
				height: 45vw;
				background-color: #ffffff;
				float: left;
				margin-left: 90px;
				margin-top: 120px;
				float: left;
			}

			.mai2-pian {
				width: 35vw;
				height: 35vw;
				float: left;
			}

			.ci {
				width: 43vw;
				height: 8vw;
				font-family: PingFang-SC-Medium;
				font-size: 3vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 5vw;
				letter-spacing: 0vw;
				color: #101010;
				float: left;
			}



			.dui {
				width: 3vw;
				height: 3vw;
				background-color: #09b674;
				margin: 0 auto;
				margin-top: 128px;
			}

			.he {


				font-size: 4vw;

				line-height: 6vw;

				color: #333333;


			}

			.money {
				font-size: 3vw;
				color: #fc6217;
				margin-left: 100px;


			}

			.suan {
				width: 28vw;
				height: 13vw;
				background-color: #09b674;
				float: right;
				margin-top: -160px;
			}

			.ha {
				font-size: 4vw;
				color: #ffffff;
			}


			#box6 {
				width: 100vw;
				height: 13vw;
				/* background-color: #09b674; */
				box-shadow: -1vw 0vw 1vw 0vw rgba(0, 0, 0, 0.1);
				border: solid 0vw #f4f5f5;
			}

			.souye {
				width: 6vw;
				height: 6vw;
				
				float: left;
			}

			.fenlei {
				width: 6vw;
				height: 6vw;
				
				float: left;
				margin-left: 250px;
			}
			.gwc {
				width: 6vw;
				height: 6vw;
				
				float: left;
				margin-left: 250px;
			}
			.wd {
				width: 6vw;
				height: 6vw;
				
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span class="span">购物车</span>

			<p class="p">删除</p>

		</div>
		<div class="xian">

		</div>
		<div id="box2">
			<input type="checkbox" class="kuang">

			<div class="pian">
				<img src="./img/购物车(1).png" alt="">
			</div>
			<div class="jie">
				<h3>直发 ecostore/ecostore 椰子香草沐浴露</h3>
				<p class="qian">￥108</p>
				<p class="hui">￥2250</p>
				<div class="yi">
					- 1 +
				</div>
			</div>
		</div>
		<div class="ju">

		</div>
		<div id="box2">
			<input type="checkbox" class="kuang">

			<div class="pian">
				<img src="./img/购物车(1).png" alt="">
			</div>
			<div class="jie">
				<h3>直发 ecostore/ecostore 椰子香草沐浴露</h3>
				<p class="qian">￥108</p>
				<p class="hui">￥2250</p>
				<div class="yi">
					- 1 +
				</div>
			</div>
		</div>
		<div class="jv2">

		</div>
		<div id="box3">
			<span class="qi">为你推荐</span>
			<p class="dai">recommended</p>
		</div>
		<div id="box4">
			<div class="mai1">
				<div class="mai1-tu">
					<img src="./img/购物车(1).png" alt="" style="width: 36vw;
	height: 36vw;">
					<div class="zi">
						<span> 直发ecostore/ecostore 椰子
							香草沐浴露400m</span>

					</div>
				</div>

			</div>
			<div class="mai2">
				<div class="mai2-pian">
					<img src="./img/购物车(1).png" alt="" style="width: 36vw;
	height: 36vw;">
					<div class="ci">
						<span>利快KleineWolke德国进口白
							色浴室摆件套装洗手液瓶...</span>
					</div>
				</div>







			</div>

			<input type="checkbox"   class="dui">

			<p class="he">合计： <span class="money">￥216</span> </p>


			<div class="suan">
				<p class="ha">去结算</p>
			</div>


			<div id="box6">
				<div class="souye">
					<img src="./img/首页.png" alt="" style="width: 6vw;
	height: 6vw;">
        <p style="font-size: 3vw;">首页</p>
				</div>
				<div class="fenlei">
					<img src="./img/分类.png" alt="" style="width: 6vw;
				height: 6vw;">
                <p style="font-size: 3vw;">分类</p>
				</div>
				<div class="gwc">
					<img src="./img/gouwuche11.png" alt="" style="width: 6vw;
							height: 6vw;">
                     <p style="font-size: 3vw;">购物车</p>
				</div>
				<div class="wd">
					<img src="./img/我的.png" alt="" style="width: 6vw;
							height: 6vw;">
				<p style="font-size: 3vw;">我的</p>
				</div>
			</div>


		</div>


	</body>
</html>